<template>
    <div>
        <h1>(管理员查看)理财列表</h1>
        理财名称: <input type="text" v-model="name" />
        理财编号: <input type="text" v-model="id" />
        <button @click="LoginShow()">查询</button>
        <table class="table table-bordered" border="1">
            <thead>
                <tr>
                    <th>理财名称</th>
                    <th>年收益</th>
                    <th>利息</th>
                    <th>最低金额</th>
                    <th>理财人次</th>
                    <th>风险等级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in info" :key="item.F_Lid">
                    <td>{{item.F_Lname}}</td>
                    <td>{{item.F_Lyser}}</td>
                    <td>{{item.F_Iid}}</td>
                    <td>{{item.F_Lmin}}</td>
                    <td>{{item.F_Lnum}}</td>
                    <td>{{item.F_Ltop}}</td>
                    <td>
                        <button class="btn btn-danger">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <span>
            <a href="#" @click="King(1)" class="btn btn-primary">首页</a>
            <a href="#" @click="King(page.pageIndex-1)" class="btn btn-primary">上一页</a>
            <a href="#" @click="King(page.pageIndex+1)" class="btn btn-primary">下一页</a>
            <a href="#" @click="King(page.pageCount)" class="btn btn-primary">尾页</a>

            <input type="text" v-model="book" />
            <button @click="zhu()">跳转</button>
        </span>
    </div>
</template>

<script setup lang="ts">

import { onMounted, ref} from 'vue';
import axiox from 'axios';

const name = ref('')
const id = ref('')
const book = ref(0)

const page = ref({
    pageSize:2,
    pageIndex:1,
    recordCount:0,
    pageCount:0,
})
onMounted(() => {
    LoginShow()
})

const King=(id:any)=>{
    if(id>=1&&id<=page.value.pageCount)
    {
        page.value.pageIndex = id
        LoginShow()
    }
    else
    {
        alert('超出页数范围')
        return;
    }
}

const zhu=()=>{
    page.value.pageIndex=book.value;
    LoginShow();
}

const info :any= ref([])

const LoginShow = () => {
    axiox({
        method:'get',
        url:'http://localhost:51873/api/User/MatserFiniaShow',
        params:{
            id:id.value,
            name:name.value,
            pageSize:page.value.pageSize,
            pageIndex:page.value.pageIndex,
        }
    })
    .then(res => {
        info.value = res.data.list,
        page.value.recordCount = res.data.recordCount
        page.value.pageCount = res.data.pageCount
    })
    .catch(err => {
        console.log(err);
    })
}


</script>